<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaWeb知识点总结</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#6366f1',
                        accent: '#8b5cf6',
                        dark: '#1e293b',
                        light: '#f8fafc'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        mono: ['JetBrains Mono', 'monospace']
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
            }
            .gradient-bg {
                background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
            }
            .glass-effect {
                background: rgba(255, 255, 255, 0.2);
                backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.1);
            }
        }
    </style>
</head>

<body class="bg-gray-50 text-gray-800 font-sans">
    <!-- 导航栏 -->
    <nav id="navbar" class="fixed w-full z-50 transition-all duration-300 bg-white/90 backdrop-blur-md shadow-sm">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-code text-primary text-2xl"></i>
                <span class="text-xl font-bold text-dark">JavaWeb知识点总结</span>
            </div>
            <div class="hidden md:flex space-x-8">
                <a href="#html" class="text-gray-700 hover:text-primary transition-colors">HTML/CSS/JS</a>
                <a href="#servlet" class="text-gray-700 hover:text-primary transition-colors">Servlet</a>
                <a href="#database" class="text-gray-700 hover:text-primary transition-colors">数据库</a>
                <a href="#architecture" class="text-gray-700 hover:text-primary transition-colors">分层架构</a>
                <a href="#process" class="text-gray-700 hover:text-primary transition-colors">开发流程</a>
                <a href="#extend" class="text-gray-700 hover:text-primary transition-colors">扩展知识</a>
            </div>
            <button id="mobile-menu-button" class="md:hidden text-gray-700 focus:outline-none">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-200">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                <a href="#html" class="text-gray-700 py-2 hover:text-primary transition-colors">HTML/CSS/JS</a>
                <a href="#servlet" class="text-gray-700 py-2 hover:text-primary transition-colors">Servlet</a>
                <a href="#database" class="text-gray-700 py-2 hover:text-primary transition-colors">数据库</a>
                <a href="#architecture" class="text-gray-700 py-2 hover:text-primary transition-colors">分层架构</a>
                <a href="#process" class="text-gray-700 py-2 hover:text-primary transition-colors">开发流程</a>
                <a href="#extend" class="text-gray-700 py-2 hover:text-primary transition-colors">扩展知识</a>
            </div>
        </div>
    </nav>

    <!-- 英雄区 -->
    <header class="pt-24 pb-16 md:pt-32 md:pb-24 gradient-bg text-white">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold mb-6 text-shadow">JavaWeb 知识点总结</h1>
            <p class="text-[clamp(1rem,2vw,1.25rem)] max-width-3xl mx-auto opacity-90">
                从前端到后端，全面梳理JavaWeb开发核心技术与最佳实践
            </p>
            <div class="mt-10 flex flex-wrap justify-center gap-4">
                <a href="#html"
                    class="bg-white text-primary px-6 py-3 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 font-medium">
                    开始学习 <i class="fa fa-arrow-right ml-2"></i>
                </a>
                <a href="#"
                    class="bg-transparent border-2 border-white text-white px-6 py-3 rounded-lg hover:bg-white/10 transition-all duration-300 font-medium">
                    <i class="fa fa-download mr-2"></i> 下载PDF
                </a>
            </div>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="container mx-auto px-4 py-16">
        <!-- HTML/CSS/JS 部分 -->
        <section id="html" class="mb-20 scroll-mt-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4">
                    <i class="fa fa-html5 text-primary text-2xl"></i>
                </div>
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">前端技术 (HTML/CSS/JS)</h2>
            </div>

            <div class="grid md:grid-cols-2 gap-8">
                <!-- HTML基础 -->
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <h3 class="text-xl font-bold text-dark mb-4 flex items-center">
                        <i class="fa fa-file-code-o text-primary mr-2"></i> HTML 基础
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>文档结构：<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">&lt;!DOCTYPE html&gt;</code>
                                声明与基本标签</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>语义化标签：标题（<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">&lt;h1&gt;</code>~<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">&lt;h6&gt;</code>）、段落（<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">&lt;p&gt;</code>）、列表（<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">&lt;ul&gt;</code>/<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">&lt;ol&gt;</code>）、表格（<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">&lt;table&gt;</code>）、表单（<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">&lt;form&gt;</code>）</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>多媒体与链接：<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">&lt;img&gt;</code>、<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">&lt;a&gt;</code> 标签应用</span>
                        </li>
                    </ul>
                </div>

                <!-- CSS样式 -->
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <h3 class="text-xl font-bold text-dark mb-4 flex items-center">
                        <i class="fa fa-css3 text-primary mr-2"></i> CSS 样式设计
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>选择器与盒模型：ID 选择器（<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">#main</code>）、类选择器（<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">.img1</code>）、盒模型属性（<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">width</code>/<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">height</code>/<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">padding</code>/<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">margin</code>/<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">border</code>）</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>布局与定位：浮动布局（<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">float:left</code>）、居中对齐（<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">margin:0 auto</code>）</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>响应式设计：<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">meta name="viewport"</code>
                                适配移动端</span>
                        </li>
                    </ul>
                </div>

                <!-- JavaScript交互 -->
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <h3 class="text-xl font-bold text-dark mb-4 flex items-center">
                        <i class="fa fa-code text-primary mr-2"></i> JavaScript 交互
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>DOM 操作：通过 <code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">getElementById</code>/<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">getElementsByClassName</code>
                                获取元素</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>事件监听：<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">onblur</code>（输入框失去焦点验证）、<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">onsubmit</code>（表单提交验证）</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>表单验证：正则表达式校验用户名/密码格式（如 <code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">^\w{6,8}$</code>）</span>
                        </li>
                    </ul>
                </div>

                <!-- 代码示例卡片 -->
                <div class="bg-dark text-white rounded-xl shadow-lg p-6 card-hover">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fa fa-code-fork text-accent mr-2"></i> 表单验证示例
                    </h3>
                    <pre class="bg-gray-800 rounded-lg p-4 overflow-x-auto text-sm font-mono">
window.onload = function(){
    document.getElementById("form").onsubmit = function(){
        return checkUsername() && checkPassword();
    };
    document.getElementById("username").onblur = checkUsername;
    document.getElementById("password").onblur = checkPassword;
};

function checkUsername(){
    var username = document.getElementById("username").value;
    var reg_username = /^\w{6,8}$/;
    var flag = reg_username.test(username);
    var s_username = document.getElementById("s_username");
    if(flag){
        s_username.innerHTML = "输入正确";
    }else{
        s_username.innerHTML = "用户名格式有误";
    }
    return flag;
}</pre>
                </div>
            </div>
        </section>

        <!-- Servlet 部分 -->
        <section id="servlet" class="mb-20 scroll-mt-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4">
                    <i class="fa fa-server text-primary text-2xl"></i>
                </div>
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">Servlet 核心技术</h2>
            </div>

            <div class="grid md:grid-cols-2 gap-8">
                <!-- 生命周期 -->
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <h3 class="text-xl font-bold text-dark mb-4 flex items-center">
                        <i class="fa fa-refresh text-primary mr-2"></i> Servlet 生命周期
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>初始化：<code class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">init()</code>
                                方法在第一次访问时调用</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>请求处理：<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">doGet()</code>/<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">doPost()</code>
                                处理不同请求方法</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>销毁：<code class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">destroy()</code>
                                方法在容器关闭时调用</span>
                        </li>
                    </ul>
                </div>

                <!-- 请求响应 -->
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <h3 class="text-xl font-bold text-dark mb-4 flex items-center">
                        <i class="fa fa-exchange text-primary mr-2"></i> 请求与响应机制
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>请求对象：<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">request.getParameter()</code>
                                获取参数，<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">request.setAttribute()</code>
                                共享数据</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>响应对象：<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">response.setContentType()</code>
                                设置响应类型，<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">sendRedirect()</code>
                                重定向</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>请求转发：<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">request.getRequestDispatcher().forward()</code>
                                内部跳转</span>
                        </li>
                    </ul>
                </div>

                <!-- 会话管理 -->
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <h3 class="text-xl font-bold text-dark mb-4 flex items-center">
                        <i class="fa fa-user-circle-o text-primary mr-2"></i> 会话管理
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>创建会话：<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">HttpSession session = request.getSession();</code></span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>存储与获取数据：<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">session.setAttribute("user", info)</code>
                                / <code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">session.getAttribute("user")</code></span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>应用场景：跨请求保存用户状态（登录信息、购物车数据）</span>
                        </li>
                    </ul>
                </div>

                <!-- 代码示例 -->
                <div class="bg-dark text-white rounded-xl shadow-lg p-6 card-hover">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fa fa-code-fork text-accent mr-2"></i> Servlet 示例
                    </h3>
                    <pre class="bg-gray-800 rounded-lg p-4 overflow-x-auto text-sm font-mono">
@WebServlet("/HelloServlet")
public class HelloServlet extends HttpServlet {
    public void init() throws ServletException {
        System.out.println("init");
    }
    
    public void destroy() {
        System.out.println("destroy");
    }
    
    @Override
    protected void doGet(HttpServletRequest request, 
                         HttpServletResponse response) 
                         throws ServletException, IOException {
        System.out.println("hello servlet!");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.println("&lt;html&gt;&lt;body&gt;");
        out.println("&lt;h1&gt;Hello, Servlet!&lt;/h1&gt;");
        out.println("&lt;/body&gt;&lt;/html&gt;");
    }
}</pre>
                </div>
            </div>
        </section>

        <!-- 数据库部分 -->
        <section id="database" class="mb-20 scroll-mt-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4">
                    <i class="fa fa-database text-primary text-2xl"></i>
                </div>
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">数据库操作 (JDBC 与连接池)</h2>
            </div>

            <div class="grid md:grid-cols-2 gap-8">
                <!-- JDBC核心流程 -->
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <h3 class="text-xl font-bold text-dark mb-4 flex items-center">
                        <i class="fa fa-code text-primary mr-2"></i> JDBC 核心流程
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>加载驱动：<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">Class.forName("com.mysql.jdbc.Driver")</code></span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>获取连接：<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">DriverManager.getConnection(url, user, password)</code></span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>执行 SQL：<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">PreparedStatement</code>
                                预编译执行（防 SQL 注入）</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>释放资源：手动关闭连接、语句、结果集</span>
                        </li>
                    </ul>
                </div>

                <!-- DBUtils工具类 -->
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <h3 class="text-xl font-bold text-dark mb-4 flex items-center">
                        <i class="fa fa-wrench text-primary mr-2"></i> DBUtils 工具类
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>简化 JDBC 操作：<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">QueryRunner</code>
                                封装增删改查方法</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>结果集映射：<code class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">BeanHandler</code>
                                将单行结果映射为对象</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>通用 DAO 设计：基类提供通用方法，子类继承后实现具体业务逻辑</span>
                        </li>
                    </ul>
                </div>

                <!-- 事务管理 -->
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <h3 class="text-xl font-bold text-dark mb-4 flex items-center">
                        <i class="fa fa-exchange text-primary mr-2"></i> 事务管理
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>线程安全连接：通过 <code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">ThreadLocal</code>
                                确保每个线程持有独立连接</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>事务控制：<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">connection.setAutoCommit(false)</code>
                                和 <code class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">commit()</code>/<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">rollback()</code></span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>应用场景：复杂业务操作（如转账）需要原子性保证</span>
                        </li>
                    </ul>
                </div>

                <!-- 代码示例 -->
                <div class="bg-dark text-white rounded-xl shadow-lg p-6 card-hover">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fa fa-code-fork text-accent mr-2"></i> DBUtils 示例
                    </h3>
                    <pre class="bg-gray-800 rounded-lg p-4 overflow-x-auto text-sm font-mono">
public class BaseDao {
    private QueryRunner queryRunner = new QueryRunner();
    
    /**
     * 通用的增删改的方法
     */
    protected int update(String sql, Object... args) {
        try {
            return queryRunner.update(
                JDBCTools.getConnection(), sql, args);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return 0;
    }
    
    /**
     * 查询单个对象的方法
     */
    protected &lt;T&gt; T getBean(Class&lt;T&gt; clazz, 
                          String sql, Object... args) {
        try {
            return queryRunner.query(
                JDBCTools.getConnection(), 
                sql, new BeanHandler&lt;T&gt;(clazz), args);
        } catch (Exception e) {
            throw new RuntimeException(e);
        }
    }
}</pre>
                </div>
            </div>
        </section>

        <!-- 分层架构部分 -->
        <section id="architecture" class="mb-20 scroll-mt-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4">
                    <i class="fa fa-sitemap text-primary text-2xl"></i>
                </div>
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">分层架构与设计模式</h2>
            </div>

            <div class="grid md:grid-cols-2 gap-8">
                <!-- 三层架构 -->
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <h3 class="text-xl font-bold text-dark mb-4 flex items-center">
                        <i class="fa fa-building text-primary mr-2"></i> 三层架构设计
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>表现层（Servlet/Controller）：处理请求与响应，数据传递</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>业务层（Service）：封装业务逻辑，事务控制</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>数据层（DAO）：操作数据库，接口与实现分离</span>
                        </li>
                    </ul>
                </div>

                <!-- 设计模式 -->
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <h3 class="text-xl font-bold text-dark mb-4 flex items-center">
                        <i class="fa fa-cogs text-primary mr-2"></i> 设计模式应用
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>工厂模式：连接池初始化（<code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">DruidDataSourceFactory</code>）</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>单例模式：连接池实例通常为单例</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>模板方法模式：基类定义通用数据操作模板，子类实现具体 SQL</span>
                        </li>
                    </ul>
                </div>

                <!-- 架构图 -->
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover md:col-span-2">
                    <h3 class="text-xl font-bold text-dark mb-4 flex items-center">
                        <i class="fa fa-picture-o text-primary mr-2"></i> 三层架构示意图
                    </h3>
                    <div class="relative bg-gray-50 rounded-lg p-6 h-64 overflow-hidden">
                        <div class="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-between">
                            <div class="w-full max-w-md">
                                <div class="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 rounded-r-lg">
                                    <div class="font-bold">表现层 (Servlet)</div>
                                    <p class="text-sm">处理请求与响应，转发数据到视图</p>
                                </div>
                            </div>
                            <div class="w-full max-w-md">
                                <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded-r-lg">
                                    <div class="font-bold">业务层 (Service)</div>
                                    <p class="text-sm">封装业务逻辑，调用 DAO 完成数据操作</p>
                                </div>
                            </div>
                            <div class="w-full max-w-md">
                                <div
                                    class="bg-purple-100 border-l-4 border-purple-500 text-purple-700 p-4 rounded-r-lg">
                                    <div class="font-bold">数据层 (DAO)</div>
                                    <p class="text-sm">操作数据库，实现 CRUD 方法</p>
                                </div>
                            </div>
                        </div>
                        <div class="absolute top-1/4 left-1/2 transform -translate-x-1/2">
                            <i class="fa fa-long-arrow-down text-primary text-2xl"></i>
                        </div>
                        <div class="absolute 3/4 left-1/2 transform -translate-x-1/2">
                            <i class="fa fa-long-arrow-down text-primary text-2xl"></i>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 开发流程部分 -->
        <section id="process" class="mb-20 scroll-mt-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4">
                    <i class="fa fa-cubes text-primary text-2xl"></i>
                </div>
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">核心开发流程与规范</h2>
            </div>

            <div class="grid md:grid-cols-2 gap-8">
                <!-- 请求处理流程 -->
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <h3 class="text-xl font-bold text-dark mb-4 flex items-center">
                        <i class="fa fa-exchange text-primary mr-2"></i> 请求处理流程
                    </h3>
                    <ol class="space-y-4">
                        <li class="flex items-start">
                            <span
                                class="bg-primary text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">1</span>
                            <span>前端表单提交：通过 <code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">&lt;form&gt;</code>
                                发送请求</span>
                        </li>
                        <li class="flex items-start">
                            <span
                                class="bg-primary text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">2</span>
                            <span>Servlet 接收请求：解析参数，调用业务层处理逻辑</span>
                        </li>
                        <li class="flex items-start">
                            <span
                                class="bg-primary text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">3</span>
                            <span>业务层处理：调用 DAO 操作数据库</span>
                        </li>
                        <li class="flex items-start">
                            <span
                                class="bg-primary text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">4</span>
                            <span>返回响应：成功则重定向，失败则转发错误页</span>
                        </li>
                    </ol>
                </div>

                <!-- 开发规范 -->
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <h3 class="text-xl font-bold text-dark mb-4 flex items-center">
                        <i class="fa fa-check-square-o text-primary mr-2"></i> 编码规范与最佳实践
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>字符编码：全局设置 <code
                                    class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">request.setCharacterEncoding("utf-8")</code>
                                避免乱码</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>资源管理：使用数据库连接池替代手动创建连接</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>代码复用：通用工具类、基类减少重复代码</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>安全考虑：表单验证、SQL 注入防护</span>
                        </li>
                    </ul>
                </div>

                <!-- 登录流程示例 -->
                <div class="bg-dark text-white rounded-xl shadow-lg p-6 card-hover md:col-span-2">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fa fa-user-secret text-accent mr-2"></i> 登录功能开发流程
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
                        <div class="bg-gray-800 rounded-lg p-4 flex flex-col items-center text-center">
                            <div class="bg-primary/20 rounded-full w-12 h-12 flex items-center justify-center mb-3">
                                <i class="fa fa-html5 text-primary text-xl"></i>
                            </div>
                            <h4 class="font-bold mb-2">1. 前端页面</h4>
                            <p class="text-sm opacity-75">login.html 提供表单，提交到 LoginServlet</p>
                        </div>
                        <div class="flex items-center justify-center">
                            <i class="fa fa-long-arrow-right text-primary text-2xl"></i>
                        </div>
                        <div class="bg-gray-800 rounded-lg p-4 flex flex-col items-center text-center">
                            <div class="bg-primary/20 rounded-full w-12 h-12 flex items-center justify-center mb-3">
                                <i class="fa fa-server text-primary text-xl"></i>
                            </div>
                            <h4 class="font-bold mb-2">2. Servlet 处理</h4>
                            <p class="text-sm opacity-75">接收参数，创建 User 对象，调用 Service</p>
                        </div>
                        <div class="flex items-center justify-center">
                            <i class="fa fa-long-arrow-right text-primary text-2xl"></i>
                        </div>
                        <div class="bg-gray-800 rounded-lg p-4 flex flex-col items-center text-center">
                            <div class="bg-primary/20 rounded-full w-12 h-12 flex items-center justify-center mb-3">
                                <i class="fa fa-database text-primary text-xl"></i>
                            </div>
                            <h4 class="font-bold mb-2">3. 数据库操作</h4>
                            <p class="text-sm opacity-75">Service 调用 DAO 查询用户，返回结果</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 扩展知识部分 -->
        <section id="extend" class="mb-20 scroll-mt-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4">
                    <i class="fa fa-plus-circle text-primary text-2xl"></i>
                </div>
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">扩展知识点</h2>
            </div>

            <div class="grid md:grid-cols-3 gap-6">
                <!-- 过滤器 -->
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                        <i class="fa fa-filter text-primary text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-dark mb-3">过滤器 (Filter)</h3>
                    <p class="text-gray-700">统一处理请求/响应（如编码过滤、权限验证、日志记录）。</p>
                    <pre class="bg-gray-100 rounded-lg p-3 mt-4 text-sm font-mono">
public class EncodingFilter implements Filter {
    public void doFilter(ServletRequest request, 
                         ServletResponse response, 
                         FilterChain chain) {
        request.setCharacterEncoding("utf-8");
        chain.doFilter(request, response);
    }
}</pre>
                </div>

                <!-- 监听器 -->
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                        <i class="fa fa-bell text-primary text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-dark mb-3">监听器 (Listener)</h3>
                    <p class="text-gray-700">监听 Servlet 上下文、Session、Request 的生命周期事件。</p>
                    <pre class="bg-gray-100 rounded-lg p-3 mt-4 text-sm font-mono">
public class SessionListener 
    implements HttpSessionListener {
    
    public void sessionCreated(
        HttpSessionEvent se) {
        // 统计在线用户数
    }
}</pre>
                </div>

                <!-- JSP与EL -->
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                        <i class="fa fa-code text-primary text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-dark mb-3">JSP 与 EL 表达式</h3>
                    <p class="text-gray-700">JSP 作为视图层，结合 EL 表达式渲染数据。</p>
                    <pre class="bg-gray-100 rounded-lg p-3 mt-4 text-sm font-mono">
&lt;%@ page language="java" %&gt;
&lt;html&gt;
&lt;body&gt;
    &lt;h1&gt;欢迎 ${user.username}!&lt;/h1&gt;
    &lt;c:forEach items="${list}" var="item"&gt;
        ${item.name}
    &lt;/c:forEach&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
                </div>

                <!-- MVC模式 -->
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
                    <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                        <i class="fa fa-sitemap text-primary text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-dark mb-3">MVC 模式</h3>
                    <p class="text-gray-700">模型（数据）-视图（展示）-控制器（逻辑）分离。</p>
                    <ul class="text-gray-700 space-y-2 mt-4">
                        <li><i class="fa fa-circle text-xs text-primary mr-2"></i> 模型：数据实体与 DAO</li>
                        <li><i class="fa fa-circle text-xs text-primary mr-2"></i> 视图：HTML/JSP 页面</li>
                        <li><i class="fa fa-circle text-xs text-primary mr-2"></i> 控制器：Servlet 处理逻辑</li>
                    </ul>
                </div>

                <!-- 综合案例 -->
                <div class="bg-white rounded-xl shadow-lg p-6 card-hover md:col-span-2">
                    <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                        <i class="fa fa-cubes text-primary text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-dark mb-3">综合案例分析</h3>
                    <p class="text-gray-700">以登录功能为例，完整演示 JavaWeb 开发流程：</p>
                    <ol class="text-gray-700 space-y-3 mt-4">
                        <li class="flex items-start">
                            <span
                                class="bg-primary/20 text-primary rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">1</span>
                            <span>前端表单提交到 LoginServlet</span>
                        </li>
                        <li class="flex items-start">
                            <span
                                class="bg-primary/20 text-primary rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">2</span>
                            <span>Servlet 接收参数，调用 Service 层</span>
                        </li>
                        <li class="flex items-start">
                            <span
                                class="bg-primary/20 text-primary rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">3</span>
                            <span>Service 调用 DAO 执行数据库查询</span>
                        </li>
                        <li class="flex items-start">
                            <span
                                class="bg-primary/20 text-primary rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">4</span>
                            <span>根据结果重定向到成功页或错误页</span>
                        </li>
                    </ol>
                </div>
            </div>
        </section>

        <!-- 总结部分 -->
        <section class="bg-primary/5 rounded-2xl p-8 mb-20">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-6">JavaWeb 知识体系全景</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="bg-white rounded-xl shadow-lg p-6">
                    <h3 class="text-xl font-bold text-dark mb-4 flex items-center">
                        <i class="fa fa-th-large text-primary mr-2"></i> 技术栈概览
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span><strong>前端基础</strong>：HTML5、CSS3、JavaScript、DOM 操作</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span><strong>后端核心</strong>：Servlet、JSP、EL 表达式、过滤器、监听器</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span><strong>数据库</strong>：MySQL、JDBC、连接池、事务管理</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span><strong>开发模式</strong>：三层架构、MVC 模式、设计模式应用</span>
                        </li>
                    </ul>
                </div>

                <div class="bg-white rounded-xl shadow-lg p-6">
                    <h3 class="text-xl font-bold text-dark mb-4 flex items-center">
                        <i class="fa fa-rocket text-primary mr-2"></i> 学习路径建议
                    </h3>
                    <ol class="space-y-3">
                        <li class="flex items-start">
                            <span
                                class="bg-primary/20 text-primary rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">1</span>
                            <span>掌握 HTML/CSS/JavaScript 基础，理解前端交互逻辑</span>
                        </li>
                        <li class="flex items-start">
                            <span
                                class="bg-primary/20 text-primary rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">2</span>
                            <span>学习 Servlet 核心技术，理解请求响应机制与会话管理</span>
                        </li>
                        <li class="flex items-start">
                            <span
                                class="bg-primary/20 text-primary rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">3</span>
                            <span>掌握 JDBC 操作与数据库设计，理解事务管理</span>
                        </li>
                        <li class="flex items-start">
                            <span
                                class="bg-primary/20 text-primary rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">4</span>
                            <span>理解分层架构思想，学习 MVC 模式与设计模式应用</span>
                        </li>
                        <li class="flex items-start">
                            <span
                                class="bg-primary/20 text-primary rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">5</span>
                            <span>通过实战项目巩固知识，如实现用户管理、电商系统等</span>
                        </li>
                    </ol>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa fa-code text-primary text-2xl"></i>
                        <span class="text-xl font-bold">JavaWeb知识点总结</span>
                    </div>
                    <p class="text-gray-400 mb-4">全面梳理JavaWeb开发核心技术与最佳实践，助力开发者快速掌握JavaWeb开发技能。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-github text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-linkedin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                    </div>
                </div>

                <div>
                    <h4 class="text-lg font-bold mb-4">快速导航</h4>
                    <ul class="space-y-2">
                        <li><a href="#html" class="text-gray-400 hover:text-white transition-colors">HTML/CSS/JS</a>
                        </li>
                        <li><a href="#servlet" class="text-gray-400 hover:text-white transition-colors">Servlet</a></li>
                        <li><a href="#database" class="text-gray-400 hover:text-white transition-colors">数据库</a></li>
                        <li><a href="#architecture" class="text-gray-400 hover:text-white transition-colors">分层架构</a>
                        </li>
                        <li><a href="#process" class="text-gray-400 hover:text-white transition-colors">开发流程</a></li>
                        <li><a href="#extend" class="text-gray-400 hover:text-white transition-colors">扩展知识</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="text-lg font-bold mb-4">相关资源</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Java 官方文档</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Servlet API 文档</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">MySQL 官方文档</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">JavaWeb 实战教程</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">设计模式详解</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="text-lg font-bold mb-4">联系我们</h4>
                    <ul class="space-y-2">
                        <li class="flex items-center">
                            <i class="fa fa-envelope-o text-primary mr-2"></i>
                            <span class="text-gray-400">contact@example.com</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone text-primary mr-2"></i>
                            <span class="text-gray-400">+86 123 4567 8901</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-map-marker text-primary mr-2"></i>
                            <span class="text-gray-400">北京市海淀区中关村</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-gray-800 mt-10 pt-6 text-center text-gray-500">
                <p>&copy; 2025 JavaWeb知识点总结 | 版权所有</p>
            </div>
        </div>
    </footer>

    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function () {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('bg-white', 'shadow-md');
                navbar.classList.remove('bg-white/90');
            } else {
                navbar.classList.remove('bg-white', 'shadow-md');
                navbar.classList.add('bg-white/90');
            }
        });

        // 移动端菜单切换
        document.getElementById('mobile-menu-button').addEventListener('click', function () {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();

                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);

                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });

                    // 关闭移动端菜单
                    document.getElementById('mobile-menu').classList.add('hidden');
                }
            });
        });
    </script>
</body>

</html>